<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步编程和回调函数</title>
</head>
<body>
    <p>回调是 作为参数传递给另一个函数，并在后者内部的特定条件（如异步完成、事件触发）下被调用的函数。</p>
<p id="yibu">我会在指定时间变身</p>

<img id="goumang" src="./goumang.jpg" style="width: 300px;" alt="句芒"/>
<button id="change">按钮</button>


<script>
// 文字变化
 setTimeout(function () {
    document.getElementById("yibu").innerHTML="3s时间到了，我变身了";
}, 3000);

// 图片切换
 function changeImage(callback) {
            
            const img = document.getElementById('goumang');
            if (!img) {
                console.error("错误：找不到ID为'goumang'的图片元素");
                return;
            }
            
            const newSrc = callback(img.src);
            console.log("正在从", img.src, "切换到", newSrc);
            img.src = newSrc + '?t=' + Date.now(); // 添加时间戳防止缓存
        }
        // 绑定按钮点击事件,一定要有触发机制
        document.getElementById('change').addEventListener('click', () => {
            changeImage((currentSrc) => {
                return currentSrc.includes('goumang.jpg') 
                    ? './books.jpg' 
                    : './goumang.jpg';
            });
        });
 </script> 
   

    

</body>
</html>